@component-hook/picker 0.1.6 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @component-hook/picker
 
-Picker component with vue3 ([DEMO](https://tzuyi0817.github.io/component-hook/#/component/picker))
+Picker component with vue3 and react ([DEMO](https://tzuyi0817.github.io/component-hook/#/component/picker))
 
 <p>
   <a href="https://npm-stat.com/charts.html?package=@component-hook/picker">
@@ -33,12 +33,12 @@ $ yarn add @component-hook/picker
 $ pnpm install @component-hook/picker
 ```
 
-## Basic Usage
+## Usage with Vue
 
 ```vue
 <script setup>
 import { ref, reactive } from 'vue';
-import Picker from '@component-hook/picker';
+import Picker from '@component-hook/picker/vue';
 
 const currentSelect = ref({});
 const anchor = ref([0, 1, 2]);
@@ -107,17 +107,108 @@ function onCancel() {
 </template>
 ```
 
-## Attributes
+## Usage with React
 
-| Name                 | Required | Type                  | Description                                                                         | Default               |
-| -------------------- | -------- | --------------------- | ----------------------------------------------------------------------------------- | --------------------- |
-| v-model:isShowPicker | true     | `boolean`             | Control picker show                                                                 | —                     |
-| v-model:anchor       | true     | `number` / `number[]` | Picker current select index (single column for Number、 multiple columns for Array) | —                     |
-| data                 | false    | `array`               | Picker list [1, 2, 3] or [[1, 2, 3], [1, 2, 3]]                                     | —                     |
-| type                 | false    | `string`              | Built-in picker type, no need to pass in data (date, time)                          | —                     |
-| showKey              | false    | `string` / `string[]` | Wheel options name (object key)                                                     | —                     |
-| swipeTime            | false    | `number`              | Wheel swipe Time                                                                    | 500                   |
-| options              | false    | `object`              | Custom text, color and class                                                        | See below for details |
+```jsx
+import { useState } from 'react';
+import Picker from '@component-hook/picker/react';
+
+const singleData = [
+  { langType: 2, code: 'vi', original: 'Tiếng Việt' },
+  { langType: 0, code: 'en', original: 'English' },
+  { langType: 1, code: 'cn', original: '中文' },
+];
+const cascadeData = [singleData, singleData, singleData];
+
+const options = {
+  confirmColor: '#000',
+  cancelClass: 'test',
+  titleText: 'Title',
+};
+
+function PickerExample() {
+  const [currentSelect, setCurrentSelect] = useState({});
+  const [anchor, setAnchor] = useState([0, 1, 2]);
+  const [anchorSingle, setAnchorSingle] = useState(0);
+  const [currentDate, setCurrentDate] = useState([2022, 7, 7]);
+  const [currentTime, setCurrentTime] = useState([]);
+  const [showPicker, setShowPicker] = useState(false);
+  const [showSingle, setShowSingle] = useState(false);
+  const [showDate, setShowDate] = useState(false);
+  const [showTime, setShowTime] = useState(false);
+
+  function onConfirm(value) {
+    setCurrentSelect(value);
+  }
+
+  return (
+    <>
+      <Picker
+        isShowPicker={showPicker}
+        data={cascadeData}
+        showKey={['original', 'original', 'original']}
+        options={{ titleText: 'cascade selector' }}
+        anchor={anchor}
+        onChangeAnchor={setAnchor}
+        onClose={() => setShowPicker(false)}
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+      />
+
+      <Picker
+        data={singleData}
+        isShowPicker={showSingle}
+        anchor={anchorSingle}
+        showKey="original"
+        options={{ titleText: 'single selector' }}
+        onChangeAnchor={setAnchorSingle}
+        onClose={() => setShowSingle(false)}
+      />
+
+      <Picker
+        isShowPicker={showDate}
+        onClose={() => setShowDate(false)}
+        anchor={currentDate}
+        type="date"
+        options={{ titleText: 'date selector' }}
+        onChangeAnchor={setCurrentDate}
+      />
+
+      <Picker
+        isShowPicker={showTime}
+        onClose={() => setShowTime(false)}
+        anchor={currentTime}
+        type="time"
+        options={{ titleText: 'time selector' }}
+        onChangeAnchor={setCurrentTime}
+      />
+    </>
+  );
+}
+
+function onCancel() {
+  console.log('cancel');
+}
+```
+
+## Attributes (Common)
+
+| Name         | Required | Type                  | Description                                                                                                  | Default               |
+| ------------ | -------- | --------------------- | ------------------------------------------------------------------------------------------------------------ | --------------------- |
+| isShowPicker | true     | `boolean`             | Control picker show (`vue` use `v-model`)                                                                    | —                     |
+| anchor       | true     | `number` / `number[]` | Picker current select index (single column for `number`、 multiple columns for `Array`, `vue` use `v-model`) | —                     |
+| data         | false    | `array`               | Picker list `[1, 2, 3]` or `[[1, 2, 3], [1, 2, 3]]`                                                          | —                     |
+| type         | false    | `string`              | Built-in picker type, no need to pass in data (date, time)                                                   | —                     |
+| showKey      | false    | `string` / `string[]` | Wheel options name (object key)                                                                              | —                     |
+| swipeTime    | false    | `number`              | Wheel swipe Time                                                                                             | 500                   |
+| options      | false    | `object`              | Custom text, color and class                                                                                 | See below for details |
+
+## Attributes (React)
+
+| Name           | Required | Type                                             | Description                                        | Default |
+| -------------- | -------- | ------------------------------------------------ | -------------------------------------------------- | ------- |
+| onClose        | true     | `Function () => void`                            | close picker show (need to update state)           | —       |
+| onChangeAnchor | true     | `Function (anchor: number` / `number[]) => void` | update picker anchor (need to update anchor state) | —       |
 
 ## Options Attribute
 
@@ -137,7 +228,7 @@ function onCancel() {
 
 ## Events
 
-| Event   | Description                                  | Type                           |
-| :------ | :------------------------------------------- | :----------------------------- |
-| confirm | Triggered when the confirm button is clicked | `Function () => selected item` |
-| cancel  | Triggered when the cancel button is clicked  | `Function () => void`          |
+| Event                              | Description                                  | Type                                      |
+| :--------------------------------- | :------------------------------------------- | :---------------------------------------- |
+| confirm(`vue`), onConfirm(`react`) | Triggered when the confirm button is clicked | `Function (value: selected item) => void` |
+| cancel(`vue`), onClose(`react`)    | Triggered when the cancel button is clicked  | `Function () => void`                     |

package/dist/react/index.css

@@ -0,0 +1 @@
+.mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#0003}.picker{position:fixed;left:0;right:0;bottom:0;height:270px;z-index:10000;background:#fff;-webkit-user-select:none;user-select:none}.picker_title{position:relative;height:44px;color:#333}.picker_title:after{content:"";display:block;border-bottom:1px solid #ebebeb;left:0;right:0;transform:scaleY(.5)}.picker_title button{position:absolute;height:44px;line-height:44px;padding:0 12px;font-size:14px;border:none;background-color:transparent}.picker_title h4{margin:0;font-size:16px;font-weight:400;height:44px;line-height:44px;text-align:center}.picker_cancel{left:0;cursor:pointer;transition:all .3s}.picker_cancel:hover{filter:brightness(110%)}.picker_confirm{right:0;cursor:pointer;transition:all .3s}.picker_confirm:hover{filter:brightness(110%)}.picker_panel{position:relative;height:226px;padding:24px 12px;box-sizing:border-box}.picker_mask_top,.picker_mask_bottom{position:absolute;left:0;right:0;height:72px;background:#fff;transform:translateZ(0);z-index:1;pointer-events:none}.picker_mask_top{top:24px;background:linear-gradient(to bottom,#ffffffe6,#ffffff80)}.picker_mask_top:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid #ebebeb;transform:scaleY(.5)}.picker_mask_bottom{bottom:24px;background:linear-gradient(to top,#ffffffe6,#ffffff80)}.picker_mask_bottom:before{content:"";display:block;position:absolute;left:0;right:0;top:0;border-bottom:1px solid #ebebeb;transform:scaleY(.5)}.picker_wheel{flex:1;overflow:hidden}.picker_wheel_wrapper{display:flex;align-items:stretch;height:100%}.picker_wheel_scroll{margin-top:72px;padding:0}.picker_wheel_item{height:34px;line-height:34px;font-size:17px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333}.fade-enter{opacity:0}.fade-enter-active{opacity:1;transition:all .3s ease}.fade-exit-active{opacity:0;transition:all .3s ease}.slide-enter{opacity:.5;transform:translate3d(0,270px,0)}.slide-enter-active{transition:all .3s ease;opacity:1;transform:translateZ(0)}.slide-exit-active{transition:all .3s ease;opacity:.5;transform:translate3d(0,270px,0)}

package/dist/react/picker.es.d.ts

@@ -0,0 +1,60 @@
+import { JSX as JSX_2 } from 'react';
+
+export declare type NormalData = Record<PropertyKey, unknown> | string | number;
+
+export declare type OriginData = Array<NormalData>;
+
+declare function Picker<T = NormalData, D = PickerAnchor>({ data, isShowPicker, options, anchor, showKey, swipeTime, type, onChangeAnchor, onClose, onCancel, onConfirm, }: PickerComponentProps<D> & PickerEmit<T, D>): JSX_2.Element;
+export default Picker;
+
+export declare type PickerAnchor = number | Array<number>;
+
+export declare type PickerBuiltIn = 'date' | 'time' | '';
+
+export declare interface PickerComponentProps<T = PickerAnchor> {
+    data?: PickerData;
+    isShowPicker: boolean;
+    options?: Partial<PickerOptions>;
+    anchor: T;
+    showKey?: string | Array<string>;
+    swipeTime?: number;
+    type?: PickerBuiltIn;
+}
+
+export declare type PickerData = OriginData | Array<OriginData>;
+
+export declare interface PickerEmit<T = NormalData, D = PickerAnchor> {
+    onClose: () => void;
+    onChangeAnchor: (value: D) => void;
+    onCancel?: () => void;
+    onConfirm?: (value: T) => void;
+}
+
+export declare interface PickerOptions {
+    cancelClass: string;
+    confirmClass: string;
+    titleClass: string;
+    cancelColor: string;
+    confirmColor: string;
+    titleColor: string;
+    cancelText: string;
+    confirmText: string;
+    titleText: string;
+}
+
+export declare interface PickerProps<T = PickerAnchor> {
+    data: PickerData;
+    isShowPicker: boolean;
+    anchor: T;
+    options?: Partial<PickerOptions>;
+    showKey?: string | Array<string>;
+    swipeTime?: number;
+    type: PickerBuiltIn;
+}
+
+export declare interface PickerSelectItems<T = NormalData> {
+    item: Array<T>;
+    anchor: Array<number>;
+}
+
+export { }