mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-17 11:11:25 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: use $$restProps API

Browse source 
- add ref prop for applicable components (#196)
- add slot to Content Switcher `Switch` component (#183)
- remove fillArray, css utilities
This commit is contained in:
Eric Liu 2020-07-18 20:00:20 -07:00
commit e886d772c7
288 changed files with 4681 additions and 4498 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/components/DatePicker/createCalendar.js
View file

@ -1,40 +1,47 @@
import flatpickr from 'flatpickr';
import l10n from 'flatpickr/dist/l10n/index.js';
import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
import { cx } from '../../lib';
import flatpickr from "flatpickr";
import l10n from "flatpickr/dist/l10n/index.js";
import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
function updateClasses(instance) {
const { calendarContainer, days, daysContainer, weekdayContainer, selectedDates } = instance;
const {
calendarContainer,
days,
daysContainer,
weekdayContainer,
selectedDates,
} = instance;
calendarContainer.classList.add(cx('--date-picker__calendar'));
calendarContainer.querySelector('.flatpickr-month').classList.add(cx('--date-picker__month'));
calendarContainer.classList.add("bx--date-picker__calendar");
calendarContainer
.querySelector(".flatpickr-month")
.classList.add("bx--date-picker__month");
weekdayContainer.classList.add(cx('--date-picker__weekdays'));
weekdayContainer.querySelectorAll('.flatpickr-weekday').forEach(node => {
node.classList.add(cx('--date-picker__weekday'));
weekdayContainer.classList.add("bx--date-picker__weekdays");
weekdayContainer.querySelectorAll(".flatpickr-weekday").forEach((node) => {
node.classList.add("bx--date-picker__weekday");
});
daysContainer.classList.add(cx('--date-picker__days'));
days.querySelectorAll('.flatpickr-day').forEach(node => {
node.classList.add(cx('--date-picker__day'));
if (node.classList.contains('today') && selectedDates.length > 0) {
node.classList.add('no-border');
} else if (node.classList.contains('today') && selectedDates.length === 0) {
node.classList.remove('no-border');
daysContainer.classList.add("bx--date-picker__days");
days.querySelectorAll(".flatpickr-day").forEach((node) => {
node.classList.add("bx--date-picker__day");
if (node.classList.contains("today") && selectedDates.length > 0) {
node.classList.add("no-border");
} else if (node.classList.contains("today") && selectedDates.length === 0) {
node.classList.remove("no-border");
}
});
}
function updateMonthNode(instance) {
const monthText = instance.l10n.months.longhand[instance.currentMonth];
const staticMonthNode = instance.monthNav.querySelector('.cur-month');
const staticMonthNode = instance.monthNav.querySelector(".cur-month");
if (staticMonthNode) {
staticMonthNode.textContent = monthText;
} else {
const monthSelectNode = instance.monthsDropdownContainer;
const span = document.createElement('span');
span.setAttribute('class', 'cur-month');
const span = document.createElement("span");
span.setAttribute("class", "cur-month");
span.textContent = monthText;
monthSelectNode.parentNode.replaceChild(span, monthSelectNode);
}
@ -43,10 +50,11 @@ function updateMonthNode(instance) {
function createCalendar({ options, base, input, dispatch }) {
let locale = options.locale;
if (options.locale === 'en' && l10n && l10n.en) {
if (options.locale === "en" && l10n && l10n.en) {
l10n.en.weekdays.shorthand.forEach((_, index) => {
const shorthand = _.slice(0, 2);
l10n.en.weekdays.shorthand[index] = shorthand === 'Th' ? 'Th' : shorthand.charAt(0);
l10n.en.weekdays.shorthand[index] =
shorthand === "Th" ? "Th" : shorthand.charAt(0);
});
locale = l10n.en;
@ -58,27 +66,27 @@ function createCalendar({ options, base, input, dispatch }) {
disableMobile: true,
clickOpens: true,
locale,
plugins: [options.mode === 'range' && new rangePlugin({ position: 'left', input })].filter(
Boolean
),
plugins: [
options.mode === "range" && new rangePlugin({ position: "left", input }),
].filter(Boolean),
nextArrow:
'<svg width="16px" height="16px" viewBox="0 0 16 16"><polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/><rect width="16" height="16" style="fill: none" /></svg>',
prevArrow:
'<svg width="16px" height="16px" viewBox="0 0 16 16"><polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/><rect width="16" height="16" style="fill: none" /></svg>',
onChange: () => {
dispatch('change');
dispatch("change");
},
onClose: () => {
dispatch('close');
dispatch("close");
},
onMonthChange: (s, d, instance) => {
updateMonthNode(instance);
},
onOpen: (s, d, instance) => {
dispatch('open');
dispatch("open");
updateClasses(instance);
updateMonthNode(instance);
}
},
});
}