cdui-js 1.0.14 → 1.0.16

package/README.md

@@ -100,6 +100,40 @@ console.log(getValue());
 ```
 
 
+## 批量更新
+
+同一时刻如果修改了多个响应式属性，则每次修改都会触发响应式更新。
+
+```tsx
+import { batch, createEffect, reactive } from 'cdui-js';
+
+const state = reactive({ value1: 1, value2: 2 });
+
+createEffect(() => {
+  console.log(state.value1, state.value2);
+});
+
+// 两次更新会执行 createEffect 回调两次
+state.value1++;
+state.value2++;
+```
+
+这种情况可使用`batch`进行批量修改响应式属性以减少响应式自动更新的次数。
+
+```tsx
+import { batch, createEffect, reactive } from 'cdui-js';
+
+const state = reactive({ value1: 1, value2: 2 });
+
+createEffect(() => {
+  console.log(state.value1, state.value2);
+});
+
+// 两次更新会执行 createEffect 回调两次
+state.value1++;
+state.value2++;
+```
+
 # 响应式组件
 
 任意一个函数，如果返回了`JSX.Element`，则这个函数就是一个响应式组件。建议使用`tsx`作为组件模板，本响应式框架没有虚拟`DOM`，也更轻量高效。
@@ -257,17 +291,17 @@ function ParentComponent() {
 }
 ```
 
-有时候，需要把不同的属性值应用到不同的`DOM`节点，可以使用`splitProps`方法对`props`进行切分。切分后的任一部分都具有响应式特性。
+有时候，需要把不同的属性值应用到不同的`DOM`节点，可以使用`omitProps`方法排除`props`中不需要的属性。`omitProps`返回的对象仍具有响应式特性。
 
 ```tsx
-import { splitProps } from 'cdui-js';
+import { omitProps } from 'cdui-js';
 
-function Component(props: { title: string, children: JSX.Element[] }) {
-  // restProps 为拆分后剩余的部分
-  const [titleProps, childrenProps, restProps] = splitProps(props, ['title'], ['children']);
+// 定义要排除的属性集合（使用 as const 标记为元组）
+const OMIT_PROPS = ['title', 'children'] as const;
 
+function Component(props: { title: string, children: JSX.Element[] }) {
   return (
-    <div {...restProps}>
+    <div {...omitProps(props, OMIT_PROPS)}>
       <div>{titleProps.title}</div>
       <div>{childrenProps.children}</div>
     </div>
@@ -275,6 +309,18 @@ function Component(props: { title: string, children: JSX.Element[] }) {
 }
 ```
 
+可以使用`combineClass`合并`class`：
+
+```tsx
+import { combineClass } from 'cdui-js';
+
+function Component(props: { class: string }) {
+  return (
+    <div class={combineClass('defaultClassName', props.class)}></div>
+  );
+}
+```
+
 > 注意，解构`props`对象会丧失响应性，除非你确定要这样，否则不要随意解构任意`props`或响应式对象。
 
 ```tsx

package/css/all.css

@@ -10,5 +10,6 @@
 @import url(combobox.css);
 @import url(canlendar.css);
 @import url(datepicker.css);
+@import url(mobile-datepicker.css);
 @import url(form.css);
 @import url(carousel.css);

package/css/mobile-datepicker.css

@@ -0,0 +1,75 @@
+.mobile-date-picker {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  min-height: calc(44px * 5);
+  position: relative;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+.mobile-date-picker-column {
+  flex: 1;
+  position: relative;
+  min-width: 0;
+}
+
+.mobile-date-picker-column::before {
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.95) 0%,
+      rgba(255, 255, 255, 0) calc(50% - 22px)
+    ),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.95) 0%,
+      rgba(255, 255, 255, 0) calc(50% - 22px)
+    );
+}
+
+.mobile-date-picker-column::after {
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 44px;
+  box-sizing: border-box;
+  border-top: 1px solid #e4e4e4;
+  border-bottom: 1px solid #e4e4e4;
+  z-index: 2;
+}
+
+.mobile-date-picker-wheel {
+  --mdp-item-h: 44px;
+  height: calc(var(--mdp-item-h) * 5);
+  overflow-y: auto;
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mobile-date-picker-wheel-inner {
+  position: relative;
+  width: 100%;
+}
+
+.mobile-date-picker-item {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: var(--mdp-item-h);
+  line-height: var(--mdp-item-h);
+  text-align: center;
+  font-size: 16px;
+  color: #1b212d;
+}

package/demo/src/App.tsx

@@ -1,13 +1,36 @@
+import { batch, createEffect, omitProps, pickProps, reactive } from '../../src/reactive';
 import { CanlendarPage } from './pages/Canlendar';
 import { ComboBoxPage } from './pages/ComboBox';
 import { DatePickerPage } from './pages/DatePicker';
 import { FormPage } from './pages/Form';
+import { MobileDatePickerPage } from './pages/MobileDatePicker';
+
+const Test = (props: { text1: string; text2: string }) => {
+  return (
+    <div>
+      <div>{JSON.stringify({ ...pickProps(props, ['text1']) })}</div>
+      <div>{JSON.stringify({ ...omitProps(props, ['text1']) })}</div>
+    </div>
+  );
+};
 
 export const App = () => {
+  let state = reactive({
+    text1: '111',
+    text2: '222',
+  });
+
+  createEffect(() => {
+    console.log(state.text1, state.text2);
+  });
+
   return (
     <div style={{ 'min-height': '100%' }}>
+      <Test {...state}></Test>
+      <button onclick={() => (state.text1 = state.text2 = '' + Math.random())}>click</button>
       <CanlendarPage></CanlendarPage>
       <DatePickerPage></DatePickerPage>
+      <MobileDatePickerPage></MobileDatePickerPage>
       <ComboBoxPage></ComboBoxPage>
       <FormPage></FormPage>
     </div>

package/demo/src/pages/MobileDatePicker.tsx

@@ -0,0 +1,5 @@
+import { MobileDatePicker } from '../../../src/components/MobileDatePicker';
+
+export const MobileDatePickerPage = () => {
+  return <MobileDatePicker></MobileDatePicker>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdui-js",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "type": "module",
   "main": "src/index.ts",
   "bin": {

package/src/components/Canlendar.tsx

@@ -1,6 +1,5 @@
-import { createSignal, combineClass, splitProps } from '../reactive';
-
 import { JSX } from '../jsx';
+import { createSignal, combineClass, omitProps } from '../reactive';
 import { Canleandar as i18n } from '../i18n';
 import { replaceTemplate } from '../template';
 import { For } from './For';
@@ -15,7 +14,7 @@ const renderDates = (
   className: string,
   todayDate: Date,
   selectedDate?: Date,
-  disableDate?: (year: number, month: number, date: number) => boolean,
+  disableFn?: (year: number, month: number, date: number) => boolean,
 ) => {
   let today = todayDate.getFullYear() === year && todayDate.getMonth() === month ? todayDate.getDate() : -1;
   let selected =
@@ -26,7 +25,7 @@ const renderDates = (
   for (let i = from; i <= to; i++) {
     items.push(
       `<span class="canlendar-date${className}${today === i ? ' today' : ''}${selected === i ? ' selected' : ''}${
-        disableDate && disableDate(year, month, i) ? ' disabled' : ''
+        disableFn && disableFn(year, month, i) ? ' disabled' : ''
       }" data-date="${year + '|' + month + '|' + i}">${i}</span>`,
     );
   }
@@ -40,7 +39,7 @@ const renderPrevMonthItems = (
   index: number,
   todayDate: Date,
   selectedDate?: Date,
-  disableDate?: (year: number, month: number, date: number) => boolean,
+  disableFn?: (year: number, month: number, date: number) => boolean,
 ) => {
   // 获取上月天数
   let days = new Date(year, month, 0).getDate();
@@ -52,7 +51,7 @@ const renderPrevMonthItems = (
     month = 11;
   }
 
-  renderDates(items, year, month, days - index + 1, days, ' prev-month', todayDate, selectedDate, disableDate);
+  renderDates(items, year, month, days - index + 1, days, ' prev-month', todayDate, selectedDate, disableFn);
 };
 
 const renderNextMonthItems = (
@@ -62,7 +61,7 @@ const renderNextMonthItems = (
   days: number,
   todayDate: Date,
   selectedDate?: Date,
-  disableDate?: (year: number, month: number, date: number) => boolean,
+  disableFn?: (year: number, month: number, date: number) => boolean,
 ) => {
   if (month < 11) {
     month++;
@@ -71,13 +70,13 @@ const renderNextMonthItems = (
     month = 0;
   }
 
-  renderDates(items, year, month, 1, days, ' next-month', todayDate, selectedDate, disableDate);
+  renderDates(items, year, month, 1, days, ' next-month', todayDate, selectedDate, disableFn);
 };
 
 const renderItems = (
   showDate: Date,
   selectedDate?: Date,
-  disableDate?: (year: number, month: number, date: number) => boolean,
+  disableFn?: (year: number, month: number, date: number) => boolean,
 ) => {
   let today = new Date();
   let year = showDate.getFullYear();
@@ -92,17 +91,17 @@ const renderItems = (
   // 当前月第一天不是周一，渲染上月数据
   if (firstWeek !== 1) {
     index = firstWeek > 0 ? firstWeek - 1 : 6;
-    renderPrevMonthItems(items, year, month, index, today, selectedDate, disableDate);
+    renderPrevMonthItems(items, year, month, index, today, selectedDate, disableFn);
   }
 
   // 获取当前月的天数
   days = new Date(year, month + 1, 0).getDate();
   // 渲染本月日期
-  renderDates(items, year, month, 1, days, '', today, selectedDate, disableDate);
+  renderDates(items, year, month, 1, days, '', today, selectedDate, disableFn);
 
   // 当前月最后一天没有占满，渲染下月数据
   if ((index += days) < 42) {
-    renderNextMonthItems(items, year, month, 42 - index, today, selectedDate, disableDate);
+    renderNextMonthItems(items, year, month, 42 - index, today, selectedDate, disableFn);
   }
 
   return items.join('');
@@ -138,6 +137,8 @@ const formatMonth = (value: Date) => {
   return month > 9 ? month : '0' + month;
 };
 
+const OMIT_PROPS = ['class', 'value', 'onValueChange', 'disableFn'] as const;
+
 export const Canlendar = (
   props: Omit<JSX.HTMLAttributes<never>, 'children'> & {
     /**
@@ -151,19 +152,17 @@ export const Canlendar = (
     /**
      * 禁用函数
      */
-    disableDate?: (year: number, month: number, date: number) => boolean;
+    disableFn?: (year: number, month: number, date: number) => boolean;
   },
 ) => {
-  const [thisProps, restProps] = splitProps(props, ['class', 'value', 'onValueChange', 'disableDate']);
-
   let domMonth: HTMLElement;
   let domBody: HTMLElement;
 
-  const [selectedDate, setSelectedDate] = createSignal(parseDate(thisProps.value));
+  const [selectedDate, setSelectedDate] = createSignal(parseDate(props.value));
   const [showDate, setShowDate] = createSignal(selectedDate() || new Date());
 
   return (
-    <div class={combineClass('canlendar', thisProps.class)} {...restProps}>
+    <div class={combineClass('canlendar', props.class)} {...omitProps(props, OMIT_PROPS)}>
       <div class="canlendar-header">
         <div ref={domMonth as any} class="canlendar-month">
           {replaceTemplate(i18n.Month, showDate().getFullYear(), formatMonth(showDate()))}
@@ -185,7 +184,7 @@ export const Canlendar = (
           let target = event.target as HTMLElement;
           let date, onValueChange;
 
-          if (target && (date = target.dataset.date) && (onValueChange = thisProps.onValueChange)) {
+          if (target && (date = target.dataset.date) && (onValueChange = props.onValueChange)) {
             let dom = domBody.querySelector('.selected') as HTMLElement;
 
             if (dom !== target) {
@@ -197,7 +196,7 @@ export const Canlendar = (
             }
           }
         }}
-        innerHTML={renderItems(showDate(), selectedDate(), thisProps.disableDate)}
+        innerHTML={renderItems(showDate(), selectedDate(), props.disableFn)}
       ></div>
     </div>
   );

package/src/components/Carousel.tsx

@@ -9,7 +9,7 @@ import {
   defineProperty,
   onCleanup,
   onMount,
-  splitProps,
+  omitProps,
 } from '../reactive';
 
 import { For } from './For';
@@ -48,6 +48,8 @@ if (isBrowser) {
   );
 }
 
+const OMIT_PROPS = ['class', 'each', 'children', 'autoplay', 'interval', 'vertical', 'api'] as const;
+
 /**
  * 轮播组件外部调用接口
  */
@@ -101,15 +103,6 @@ export const Carousel = <T, U extends JSX.Element>(
     api?: (api: CarouselApi) => void;
   },
 ) => {
-  let [thisProps, restProps] = splitProps(props, [
-    'class',
-    'each',
-    'children',
-    'autoplay',
-    'interval',
-    'vertical',
-    'api',
-  ]);
   let [currentIndex, setCurrentIndex] = createSignal(0);
 
   let ref: HTMLElement;
@@ -121,15 +114,15 @@ export const Carousel = <T, U extends JSX.Element>(
   let autoplayTimer: any;
 
   // 获取滚动方向
-  const scrollType = createMemo(() => (thisProps.vertical ? 'scrollTop' : 'scrollLeft'));
-  const offsetType = createMemo(() => (thisProps.vertical ? 'offsetTop' : 'offsetLeft'));
-  const screenType = createMemo(() => (thisProps.vertical ? 'screenY' : 'screenX'));
+  const scrollType = createMemo(() => (props.vertical ? 'scrollTop' : 'scrollLeft'));
+  const offsetType = createMemo(() => (props.vertical ? 'offsetTop' : 'offsetLeft'));
+  const screenType = createMemo(() => (props.vertical ? 'screenY' : 'screenX'));
 
   // 滚动到指定索引
   const scrollTo = (index: number) => {
     let children = ref.children;
     let length = children.length;
-    let count = thisProps.each.length; // 真实的子项数量
+    let count = props.each.length; // 真实的子项数量
 
     if (index < 0) {
       index += count;
@@ -156,7 +149,7 @@ export const Carousel = <T, U extends JSX.Element>(
 
     if (index <= 0) {
       // 真实的子项数量
-      let count = thisProps.each.length;
+      let count = props.each.length;
 
       // 先滚动到对应节点的填充节点
       ref[scrollType()] = (ref.children[index + count] as HTMLElement)[offsetType()];
@@ -219,7 +212,7 @@ export const Carousel = <T, U extends JSX.Element>(
   const autoplay = () => {
     clearTimeout(autoplayTimer);
 
-    if (thisProps.autoplay !== false) {
+    if (props.autoplay !== false) {
       autoplayTimer = setTimeout(
         () => {
           if (!resizing) {
@@ -233,14 +226,14 @@ export const Carousel = <T, U extends JSX.Element>(
 
           autoplay();
         },
-        thisProps.interval > 3000 ? thisProps.interval : 3000,
+        props.interval > 3000 ? props.interval : 3000,
       );
     }
   };
 
   // 初始化外部访问接口
-  thisProps.api &&
-    thisProps.api(
+  props.api &&
+    props.api(
       defineProperty(
         {
           backward,
@@ -278,8 +271,12 @@ export const Carousel = <T, U extends JSX.Element>(
   });
 
   return (
-    <div ref={ref as any} class={combineClass('carousel scrollbar-hidden', thisProps.class)} {...restProps}>
-      <For each={fillItems(thisProps.each)}>{thisProps.children}</For>
+    <div
+      ref={ref as any}
+      class={combineClass('carousel scrollbar-hidden', props.class)}
+      {...omitProps(props, OMIT_PROPS)}
+    >
+      <For each={fillItems(props.each)}>{props.children}</For>
     </div>
   );
 };

package/src/components/CollapsiblePanel.tsx

@@ -1,10 +1,12 @@
-import { createSignal, splitProps } from 'solid-js';
+import { createSignal } from 'solid-js';
 
 import { JSX } from '../jsx';
-import { combineClass, defineProperty } from '../reactive';
+import { combineClass, defineProperty, omitProps } from '../reactive';
 
 const COLLAPSED_CLASS = 'collapsed';
 
+const OMIT_PROPS = ['class', 'collapsed', 'collapsedSize', 'getExpandedSize', 'useTransition', 'api'] as const;
+
 /**
  * 可收拢面板外部调用接口
  */
@@ -52,15 +54,7 @@ export const CollapsiblePanel = (
 ) => {
   let ref: HTMLElement;
 
-  const [thisProps, restProps] = splitProps(props, [
-    'class',
-    'collapsed',
-    'collapsedSize',
-    'getExpandedSize',
-    'useTransition',
-    'api',
-  ]);
-  const [collapsed, setCollapsed] = createSignal(thisProps.collapsed || false);
+  const [collapsed, setCollapsed] = createSignal(props.collapsed || false);
 
   const transitionTo = (size: string, fromSize?: string) => {
     let style = ref.style;
@@ -85,22 +79,22 @@ export const CollapsiblePanel = (
 
       // 设置成收拢状态
       if (value) {
-        if (thisProps.useTransition) {
+        if (props.useTransition) {
           style.height = ref.offsetHeight + 'px';
 
           setTimeout(() => {
-            style.height = thisProps.collapsedSize || '';
+            style.height = props.collapsedSize || '';
             classList.add(COLLAPSED_CLASS);
           });
         } else {
-          style.height = thisProps.collapsedSize || '';
+          style.height = props.collapsedSize || '';
           classList.add(COLLAPSED_CLASS);
         }
       } else {
-        let getExpandedSize = thisProps.getExpandedSize;
+        let getExpandedSize = props.getExpandedSize;
 
         // 设置成展开状态
-        if (thisProps.useTransition) {
+        if (props.useTransition) {
           style.height = ref.offsetHeight + 'px';
 
           setTimeout(() => {
@@ -119,8 +113,8 @@ export const CollapsiblePanel = (
     }
   };
 
-  thisProps.api &&
-    thisProps.api(
+  props.api &&
+    props.api(
       defineProperty({ transitionTo }, 'collapsed', {
         get: collapsed,
         set: update,
@@ -130,8 +124,8 @@ export const CollapsiblePanel = (
   return (
     <div
       ref={ref as any}
-      class={combineClass('collapsed-panel', thisProps.collapsed && COLLAPSED_CLASS, thisProps.class)}
-      {...restProps}
+      class={combineClass('collapsed-panel', props.collapsed && COLLAPSED_CLASS, props.class)}
+      {...omitProps(props, OMIT_PROPS)}
     ></div>
   );
 };

package/src/components/ComboBox.tsx

@@ -1,8 +1,10 @@
 import { JSX } from '../jsx';
-import { combineClass, splitProps } from '../reactive';
+import { combineClass, omitProps } from '../reactive';
 import { disableAutoCloseEvent } from '../dom';
 import { Popup, PopupApi, PopupProps } from './Popup';
 
+const OMIT_PROPS = ['class', 'value', 'readonly', 'popupOnFocus', 'popup', 'onPopup', 'api', 'children'] as const;
+
 /**
  * 下拉框组件
  */
@@ -27,39 +29,29 @@ export const ComboBox = (
       popup?: Omit<JSX.HTMLAttributes<never>, 'children'>;
     },
 ) => {
-  let [thisProps, restProps] = splitProps(props, [
-    'class',
-    'value',
-    'readonly',
-    'popupOnFocus',
-    'popup',
-    'onPopup',
-    'api',
-    'children',
-  ]);
   let popup: PopupApi;
 
   const initApi = (api) => {
     popup = api;
-    thisProps.api && thisProps.api(popup);
+    props.api && props.api(popup);
   };
 
   return (
-    <div class={combineClass('combobox', thisProps.class)} {...restProps}>
+    <div class={combineClass('combobox', props.class)} {...omitProps(props, OMIT_PROPS)}>
       <div class="combobox-host" {...disableAutoCloseEvent}>
         <input
           class="combobox-input"
-          value={thisProps.value || ''}
-          readonly={thisProps.readonly}
-          onfocus={() => thisProps.popupOnFocus && popup.openPopup()}
-          onclick={() => thisProps.readonly && !thisProps.popupOnFocus && popup.togglePopup()}
+          value={props.value || ''}
+          readonly={props.readonly}
+          onfocus={() => props.popupOnFocus && popup.openPopup()}
+          onclick={() => props.readonly && !props.popupOnFocus && popup.togglePopup()}
         ></input>
         <svg class="icon icon-s" aria-hidden={true} onclick={() => popup.togglePopup()}>
           <use href="#icon-dropdown"></use>
         </svg>
       </div>
-      <Popup api={initApi} onPopup={thisProps.onPopup} {...thisProps.popup}>
-        {thisProps.children}
+      <Popup api={initApi} onPopup={props.onPopup} {...props.popup}>
+        {props.children}
       </Popup>
     </div>
   );

package/src/components/DatePicker.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '../jsx';
-import { combineClass, createSignal, splitProps } from '../reactive';
+import { combineClass, createSignal, omitProps } from '../reactive';
 import { disableAutoCloseEvent } from '../dom';
 import { For } from './For';
 import { Popup, PopupApi } from './Popup';
@@ -46,6 +46,8 @@ const formatMonth = (value: Date) => {
 //   );
 // };
 
+const OMIT_PROPS = ['class', 'value', 'readonly', 'format', 'children'] as const;
+
 /**
  * 日期选择组件
  */
@@ -65,26 +67,25 @@ export const DatePicker = (
     readonly?: boolean;
   },
 ) => {
-  let [thisProps, restProps] = splitProps(props, ['class', 'value', 'readonly', 'format', 'children']);
   let popup: PopupApi;
 
-  const [value, setValue] = createSignal(thisProps.value && parseDate(thisProps.value));
+  const [value, setValue] = createSignal(props.value && parseDate(props.value));
 
   return (
-    <div class={combineClass('datepicker', thisProps.class)} {...restProps}>
+    <div class={combineClass('datepicker', props.class)} {...omitProps(props, OMIT_PROPS)}>
       <div class="datepicker-host" {...disableAutoCloseEvent}>
         <input
           class="datepicker-input"
-          value={formatDate(value(), thisProps.format)}
-          readonly={thisProps.readonly}
-          onclick={() => thisProps.readonly && popup.togglePopup()}
+          value={formatDate(value(), props.format)}
+          readonly={props.readonly}
+          onclick={() => props.readonly && popup.togglePopup()}
         ></input>
         <svg class="icon icon-s" aria-hidden={true} onclick={() => popup.togglePopup()}>
           <use href="#icon-dropdown"></use>
         </svg>
       </div>
       <Popup api={(api) => (popup = api)} onPopup={() => showPopup()}>
-        {thisProps.children}
+        {props.children}
       </Popup>
     </div>
   );