antd-mobile 0.0.0-dev-626cbf51f

package/2x/es/components/cascader-view/option-skeleton.d.ts

@@ -0,0 +1,2 @@
+import type { CascaderOption } from './cascader-view';
+export declare const optionSkeleton: CascaderOption[];

package/2x/es/components/cascader-view/option-skeleton.js

@@ -0,0 +1 @@
+export const optionSkeleton = [];

package/2x/es/components/cascader-view/use-cascader-value-extend.d.ts

@@ -0,0 +1,2 @@
+import { CascaderValue, CascaderValueExtend, CascaderOption } from './cascader-view';
+export declare function useCascaderValueExtend(options: CascaderOption[]): (val: CascaderValue[]) => CascaderValueExtend;

package/2x/es/components/cascader-view/use-cascader-value-extend.js

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import memoize from 'lodash/memoize';
+export function useCascaderValueExtend(options) {
+  const generateItems = useMemo(() => {
+    return memoize(val => {
+      const ret = [];
+      let currentOptions = options;
+
+      for (const v of val) {
+        const target = currentOptions.find(option => option.value === v);
+
+        if (!target) {
+          break;
+        }
+
+        ret.push(target);
+        if (!target.children) break;
+        currentOptions = target.children;
+      }
+
+      return ret;
+    }, val => JSON.stringify(val));
+  }, [options]);
+  const generateIsLeaf = useMemo(() => {
+    return memoize(val => {
+      var _a;
+
+      let isLeaf = false;
+
+      for (const v of val) {
+        const target = options.find(option => option.value === v);
+
+        if (!target) {
+          break;
+        }
+
+        isLeaf = ((_a = target.children) === null || _a === void 0 ? void 0 : _a.length) === val.length;
+      }
+
+      return isLeaf;
+    }, val => JSON.stringify(val));
+  }, [options]);
+
+  function generateValueExtend(val) {
+    return {
+      get items() {
+        return generateItems(val);
+      },
+
+      get isLeaf() {
+        return generateIsLeaf(val);
+      }
+
+    };
+  }
+
+  return generateValueExtend;
+}

package/2x/es/components/check-list/check-list-item.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { ListItemProps } from '../list';
+import { NativeProps } from '../../utils/native-props';
+export declare type CheckListItemProps = Pick<ListItemProps, 'title' | 'children' | 'description' | 'prefix' | 'disabled' | 'onClick' | 'style'> & {
+    value: string;
+    readOnly?: boolean;
+} & NativeProps;
+export declare const CheckListItem: FC<CheckListItemProps>;

package/2x/es/components/check-list/check-list-item.js

@@ -0,0 +1,44 @@
+import React, { useContext } from 'react';
+import List from '../list';
+import { withNativeProps } from '../../utils/native-props';
+import { CheckListContext } from './context';
+import { devWarning } from '../../utils/dev-log';
+import classNames from 'classnames';
+const classPrefix = `adm-check-list-item`;
+export const CheckListItem = props => {
+  const context = useContext(CheckListContext);
+
+  if (context === null) {
+    devWarning('CheckList.Item', 'CheckList.Item can only be used inside CheckList.');
+    return null;
+  }
+
+  const active = context.value.includes(props.value);
+  const readOnly = props.readOnly || context.readOnly;
+  const extra = React.createElement("div", {
+    className: `${classPrefix}-extra`
+  }, active ? context.activeIcon : null);
+  return withNativeProps(props, React.createElement(List.Item, {
+    title: props.title,
+    className: classNames(classPrefix, readOnly && `${classPrefix}-readonly`, active && `${classPrefix}-active`),
+    description: props.description,
+    prefix: props.prefix,
+    onClick: e => {
+      var _a;
+
+      if (readOnly) return;
+
+      if (active) {
+        context.uncheck(props.value);
+      } else {
+        context.check(props.value);
+      }
+
+      (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    },
+    arrow: false,
+    clickable: !readOnly,
+    extra: extra,
+    disabled: props.disabled || context.disabled
+  }, props.children));
+};

package/2x/es/components/check-list/check-list.css

@@ -0,0 +1,9 @@
+.adm-check-list-item-extra {
+  font-size: 32px;
+  line-height: 1;
+  color: var(--adm-color-primary);
+}
+
+.adm-check-list-item-readonly {
+  cursor: unset;
+}

package/2x/es/components/check-list/check-list.d.ts

@@ -0,0 +1,14 @@
+import React, { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { ListProps } from '../list';
+export declare type CheckListProps = Pick<ListProps, 'mode' | 'style'> & {
+    defaultValue?: string[];
+    value?: string[];
+    onChange?: (val: string[]) => void;
+    multiple?: boolean;
+    activeIcon?: ReactNode;
+    disabled?: boolean;
+    readOnly?: boolean;
+    children?: React.ReactNode;
+} & NativeProps;
+export declare const CheckList: FC<CheckListProps>;

package/2x/es/components/check-list/check-list.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import List from '../list';
+import { mergeProps } from '../../utils/with-default-props';
+import { CheckListContext } from './context';
+import { usePropsValue } from '../../utils/use-props-value';
+import { CheckOutline } from 'antd-mobile-icons';
+const classPrefix = 'adm-check-list';
+const defaultProps = {
+  multiple: false,
+  defaultValue: [],
+  activeIcon: React.createElement(CheckOutline, null)
+};
+export const CheckList = p => {
+  const props = mergeProps(defaultProps, p);
+  const [value, setValue] = usePropsValue(props);
+
+  function check(val) {
+    if (props.multiple) {
+      setValue([...value, val]);
+    } else {
+      setValue([val]);
+    }
+  }
+
+  function uncheck(val) {
+    setValue(value.filter(item => item !== val));
+  }
+
+  const {
+    activeIcon,
+    disabled,
+    readOnly
+  } = props;
+  return React.createElement(CheckListContext.Provider, {
+    value: {
+      value,
+      check,
+      uncheck,
+      activeIcon,
+      disabled,
+      readOnly
+    }
+  }, withNativeProps(props, React.createElement(List, {
+    mode: props.mode,
+    className: classPrefix
+  }, props.children)));
+};

package/2x/es/components/check-list/context.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare const CheckListContext: import("react").Context<{
+    value: string[];
+    check: (val: string) => void;
+    uncheck: (val: string) => void;
+    activeIcon?: ReactNode;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+} | null>;

package/2x/es/components/check-list/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const CheckListContext = createContext(null);

package/2x/es/components/check-list/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './check-list.less';
+export type { CheckListProps } from './check-list';
+export type { CheckListItemProps } from './check-list-item';
+declare const _default: import("react").FC<import("./check-list").CheckListProps> & {
+    Item: import("react").FC<import("./check-list-item").CheckListItemProps>;
+};
+export default _default;

package/2x/es/components/check-list/index.js

@@ -0,0 +1,7 @@
+import "./check-list.css";
+import { CheckList } from './check-list';
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { CheckListItem } from './check-list-item';
+export default attachPropertiesToComponent(CheckList, {
+  Item: CheckListItem
+});

package/2x/es/components/checkbox/check-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const CheckIcon: React.NamedExoticComponent<NativeProps<never>>;

package/2x/es/components/checkbox/check-icon.js

@@ -0,0 +1,10 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+export const CheckIcon = memo(props => {
+  return withNativeProps(props, React.createElement("svg", {
+    viewBox: '0 0 40 40'
+  }, React.createElement("path", {
+    d: 'M31.5541766,15 L28.0892433,15 L28.0892434,15 C27.971052,15 27.8576674,15.044522 27.7740471,15.1239792 L18.2724722,24.1625319 L13.2248725,19.3630279 L13.2248725,19.3630279 C13.1417074,19.2834412 13.0287551,19.2384807 12.9107898,19.2380079 L9.44474455,19.2380079 L9.44474454,19.2380079 C9.19869815,19.2384085 8.99957935,19.4284738 9,19.66253 C9,19.7747587 9.04719253,19.8823283 9.13066188,19.9616418 L17.0907466,27.5338228 C17.4170809,27.8442545 17.8447695,28 18.2713393,28 L18.2980697,28 C18.7168464,27.993643 19.133396,27.8378975 19.4530492,27.5338228 L31.8693384,15.7236361 L31.8693384,15.7236361 C32.0434167,15.5582251 32.0435739,15.2898919 31.8696892,15.1242941 C31.7860402,15.0446329 31.6725052,15 31.5541421,15 L31.5541766,15 Z',
+    fill: 'currentColor'
+  })));
+});

package/2x/es/components/checkbox/checkbox.css

@@ -0,0 +1,68 @@
+.adm-checkbox {
+  --icon-size: 44px;
+  --font-size: 34px;
+  --gap: 16px;
+  display: inline-flex;
+  vertical-align: text-bottom;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+}
+
+.adm-checkbox input {
+  display: none;
+}
+
+.adm-checkbox .adm-checkbox-icon {
+  flex: none;
+  border: 2px solid var(--adm-color-light);
+  border-radius: var(--icon-size);
+  box-sizing: border-box;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: var(--adm-color-white);
+}
+
+.adm-checkbox .adm-checkbox-icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.adm-checkbox.adm-checkbox-block {
+  display: flex;
+}
+
+.adm-checkbox.adm-checkbox-checked .adm-checkbox-icon {
+  border-color: var(--adm-color-primary);
+  background-color: var(--adm-color-primary);
+}
+
+.adm-checkbox.adm-checkbox-disabled {
+  cursor: not-allowed;
+}
+
+.adm-checkbox.adm-checkbox-disabled .adm-checkbox-content {
+  opacity: 0.4;
+}
+
+.adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon.adm-checkbox-icon {
+  color: #b7b7b7;
+  border-color: var(--adm-color-light);
+  background-color: #f5f5f5;
+}
+
+.adm-checkbox .adm-checkbox-custom-icon {
+  font-size: var(--icon-size);
+}
+
+.adm-checkbox.adm-checkbox-indeterminate .adm-checkbox-icon {
+  background-color: #ffffff;
+  color: var(--adm-color-primary);
+}
+
+.adm-checkbox-content {
+  flex: 0 1 auto;
+  font-size: var(--font-size);
+  padding-left: var(--gap);
+}

package/2x/es/components/checkbox/checkbox.d.ts

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type CheckboxValue = string | number;
+export declare type CheckboxProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    value?: CheckboxValue;
+    indeterminate?: boolean;
+    block?: boolean;
+    id?: string;
+    icon?: (checked: boolean, indeterminate: boolean) => React.ReactNode;
+    children?: React.ReactNode;
+} & NativeProps<'--icon-size' | '--font-size' | '--gap'>;
+export declare const Checkbox: FC<CheckboxProps>;

package/2x/es/components/checkbox/checkbox.js

@@ -0,0 +1,86 @@
+import React, { useContext } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import classNames from 'classnames';
+import { CheckboxGroupContext } from './group-context';
+import { usePropsValue } from '../../utils/use-props-value';
+import { mergeProps } from '../../utils/with-default-props';
+import { devWarning } from '../../utils/dev-log';
+import { CheckIcon } from './check-icon';
+import { IndeterminateIcon } from './indeterminate-icon';
+import { isDev } from '../../utils/is-dev';
+import { NativeInput } from './native-input';
+const classPrefix = `adm-checkbox`;
+const defaultProps = {
+  defaultChecked: false,
+  indeterminate: false
+};
+export const Checkbox = p => {
+  const groupContext = useContext(CheckboxGroupContext);
+  const props = mergeProps(defaultProps, p);
+  let [checked, setChecked] = usePropsValue({
+    value: props.checked,
+    defaultValue: props.defaultChecked,
+    onChange: props.onChange
+  });
+  let disabled = props.disabled;
+  const {
+    value
+  } = props;
+
+  if (groupContext && value !== undefined) {
+    if (isDev) {
+      if (p.checked !== undefined) {
+        devWarning('Checkbox', 'When used within `Checkbox.Group`, the `checked` prop of `Checkbox` will not work.');
+      }
+
+      if (p.defaultChecked !== undefined) {
+        devWarning('Checkbox', 'When used within `Checkbox.Group`, the `defaultChecked` prop of `Checkbox` will not work.');
+      }
+    }
+
+    checked = groupContext.value.includes(value);
+
+    setChecked = checked => {
+      var _a;
+
+      if (checked) {
+        groupContext.check(value);
+      } else {
+        groupContext.uncheck(value);
+      }
+
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, checked);
+    };
+
+    disabled = disabled || groupContext.disabled;
+  }
+
+  const renderIcon = () => {
+    if (props.icon) {
+      return React.createElement("div", {
+        className: `${classPrefix}-custom-icon`
+      }, props.icon(checked, props.indeterminate));
+    }
+
+    return React.createElement("div", {
+      className: `${classPrefix}-icon`
+    }, props.indeterminate ? React.createElement(IndeterminateIcon, null) : checked && React.createElement(CheckIcon, null));
+  };
+
+  return withNativeProps(props, React.createElement("label", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-checked`]: checked && !props.indeterminate,
+      [`${classPrefix}-indeterminate`]: props.indeterminate,
+      [`${classPrefix}-disabled`]: disabled,
+      [`${classPrefix}-block`]: props.block
+    })
+  }, React.createElement(NativeInput, {
+    type: 'checkbox',
+    checked: checked,
+    onChange: setChecked,
+    disabled: disabled,
+    id: props.id
+  }), renderIcon(), props.children && React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, props.children)));
+};

package/2x/es/components/checkbox/group-context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CheckboxValue } from '.';
+export declare const CheckboxGroupContext: import("react").Context<{
+    value: CheckboxValue[];
+    disabled: boolean;
+    check: (val: CheckboxValue) => void;
+    uncheck: (val: CheckboxValue) => void;
+} | null>;

package/2x/es/components/checkbox/group-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const CheckboxGroupContext = createContext(null);

package/2x/es/components/checkbox/group.d.ts

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import { CheckboxValue } from '.';
+export interface CheckboxGroupProps {
+    value?: CheckboxValue[];
+    onChange?: (val: CheckboxValue[]) => void;
+    defaultValue?: CheckboxValue[];
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+export declare const Group: FC<CheckboxGroupProps>;

package/2x/es/components/checkbox/group.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { mergeProps } from '../../utils/with-default-props';
+import { CheckboxGroupContext } from './group-context';
+import { usePropsValue } from '../../utils/use-props-value';
+const defaultProps = {
+  disabled: false,
+  defaultValue: []
+};
+export const Group = p => {
+  const props = mergeProps(defaultProps, p);
+  const [value, setValue] = usePropsValue(props);
+  return React.createElement(CheckboxGroupContext.Provider // TODO: 性能优化
+  , {
+    // TODO: 性能优化
+    value: {
+      value: value,
+      disabled: props.disabled,
+      check: v => {
+        setValue([...value, v]);
+      },
+      uncheck: v => {
+        setValue(value.filter(item => item !== v));
+      }
+    }
+  }, props.children);
+};

package/2x/es/components/checkbox/indeterminate-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const IndeterminateIcon: React.NamedExoticComponent<NativeProps<never>>;

package/2x/es/components/checkbox/indeterminate-icon.js

@@ -0,0 +1,10 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+export const IndeterminateIcon = memo(props => {
+  return withNativeProps(props, React.createElement("svg", {
+    viewBox: '0 0 40 40'
+  }, React.createElement("path", {
+    d: 'M20,9 C26.0752953,9 31,13.9247047 31,20 C31,26.0752953 26.0752953,31 20,31 C13.9247047,31 9,26.0752953 9,20 C9,13.9247047 13.9247047,9 20,9 Z',
+    fill: 'currentColor'
+  })));
+});

package/2x/es/components/checkbox/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './checkbox.less';
+export type { CheckboxValue, CheckboxProps } from './checkbox';
+export type { CheckboxGroupProps } from './group';
+declare const _default: import("react").FC<import("./checkbox").CheckboxProps> & {
+    Group: import("react").FC<import("./group").CheckboxGroupProps>;
+};
+export default _default;

package/2x/es/components/checkbox/index.js

@@ -0,0 +1,7 @@
+import "./checkbox.css";
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { Group } from './group';
+import { Checkbox } from './checkbox';
+export default attachPropertiesToComponent(Checkbox, {
+  Group
+});

package/2x/es/components/checkbox/native-input.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface Props {
+    type: 'checkbox' | 'radio';
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    id?: string;
+}
+export declare const NativeInput: FC<Props>;
+export {};

package/2x/es/components/checkbox/native-input.js

@@ -0,0 +1,28 @@
+import React, { useEffect, useRef } from 'react';
+export const NativeInput = props => {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (props.disabled) return;
+    if (!inputRef.current) return;
+    const input = inputRef.current;
+
+    function handleClick(e) {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      props.onChange(input.checked);
+    }
+
+    input.addEventListener('click', handleClick);
+    return () => {
+      input.removeEventListener('click', handleClick);
+    };
+  }, [props.disabled, props.onChange]);
+  return React.createElement("input", {
+    ref: inputRef,
+    type: 'checkbox',
+    checked: props.checked,
+    onChange: () => {},
+    disabled: props.disabled,
+    id: props.id
+  });
+};

package/2x/es/components/collapse/collapse.css

@@ -0,0 +1,18 @@
+.adm-collapse-panel-header .adm-list-item-content-main {
+  padding: 24px 0;
+}
+
+.adm-collapse-arrow {
+  transform: rotate(0deg);
+  transition: all ease 0.3s;
+}
+
+.adm-collapse-arrow-active {
+  transform: rotate(-180deg);
+}
+
+.adm-collapse-panel-content {
+  font-size: var(--adm-font-size-main);
+  color: var(--adm-color-weak);
+  overflow: hidden;
+}

package/2x/es/components/collapse/collapse.d.ts

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type CollapsePanelProps = {
+    key: string;
+    title: React.ReactNode;
+    disabled?: boolean;
+    forceRender?: boolean;
+    destroyOnClose?: boolean;
+    onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void;
+    arrow?: React.ReactNode | ((active: boolean) => React.ReactNode);
+    children?: React.ReactNode;
+} & NativeProps;
+export declare const CollapsePanel: FC<CollapsePanelProps>;
+declare type ValueProps<T> = {
+    activeKey?: T;
+    defaultActiveKey?: T;
+    onChange?: (activeKey: T) => void;
+    arrow?: React.ReactNode | ((active: boolean) => React.ReactNode);
+};
+export declare type CollapseProps = (({
+    accordion?: false;
+} & ValueProps<string[]>) | ({
+    accordion: true;
+} & ValueProps<string | null>)) & {
+    children?: React.ReactNode;
+} & NativeProps;
+export declare const Collapse: FC<CollapseProps>;
+export {};