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

refactor(components): alphabetize exported props for scannability

Browse source
This commit is contained in:
Eric Liu 2019-12-31 16:36:10 -08:00
commit b1fe3de8ad
78 changed files with 265 additions and 264 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/components/DatePicker/flatpickr.js
View file

@ -1,79 +0,0 @@
import flatpickr from 'flatpickr';
import l10n from 'flatpickr/dist/l10n';
import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
import { cx } from '../../lib';
l10n.en.weekdays.shorthand.forEach((_, index) => {
const shorthand = _.slice(0, 2);
l10n.en.weekdays.shorthand[index] = shorthand === 'Th' ? 'Th' : shorthand.charAt(0);
});
function updateClasses(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'));
weekdayContainer.classList.add(cx('--date-picker__weekdays'));
weekdayContainer.querySelectorAll('.flatpickr-weekday').forEach(node => {
node.classList.add(cx('--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');
}
});
}
function updateMonthNode(instance) {
const monthText = instance.l10n.months.longhand[instance.currentMonth];
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');
span.textContent = monthText;
monthSelectNode.parentNode.replaceChild(span, monthSelectNode);
}
}
function createCalendar({ options, base, input, dispatch }) {
return new flatpickr(base, {
...options,
allowInput: true,
disableMobile: true,
clickOpens: true,
locale: l10n[options.locale],
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');
},
onClose: () => {
dispatch('close');
},
onMonthChange: (s, d, instance) => {
updateMonthNode(instance);
},
onOpen: (s, d, instance) => {
dispatch('open');
updateClasses(instance);
updateMonthNode(instance);
}
});
}
export { createCalendar };