@ray-js/smart-ui 2.13.2-beta-0 → 2.13.2-beta-1

package/lib/sticky/README.md

@@ -0,0 +1,91 @@
+---
+category: 布局
+---
+
+# Sticky 粘性布局
+
+### 介绍
+
+Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。
+
+### 引入
+
+```jsx
+import { Sticky } from '@ray-js/smart-ui';
+```
+
+## 代码演示
+
+### 基础用法
+
+将内容包裹在`Sticky`组件内即可。
+
+```jsx
+import { Sticky, Button } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  return (
+    <Sticky>
+      <Button type="primary">基础用法</Button>
+    </Sticky>
+  );
+}
+```
+
+### 吸顶距离
+
+通过`offsetTop`属性可以设置组件在吸顶时与顶部的距离。
+
+```jsx
+import { Sticky, Button } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  return (
+    <Sticky offsetTop={50}>
+      <Button customStyle={{ marginLeft: '115px' }} type="info">基础用法</Button>
+    </Sticky>
+  );
+}
+```
+
+### 指定容器
+
+通过`container`属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。
+
+```jsx
+import { Sticky, Button } from '@ray-js/smart-ui';
+import { View, createSelectorQuery } from '@ray-js/ray';
+import React from 'react';
+
+export default function Demo() {
+  const container = () => createSelectorQuery().select('#container');
+  return (
+    <View id="container">
+      <Sticky container={container}>
+        <Button customStyle={{ marginLeft: '215px' }} type="warning">
+          指定容器
+        </Button>
+      </Sticky>
+    </View>
+  );
+}
+```
+
+## API
+
+### Props
+
+| 参数       | 说明                                                         | 类型       | 默认值 |
+| ---------- | ------------------------------------------------------------ | ---------- | ------ |
+| container | 一个函数，返回容器对应的 NodesRef 节点 | _function_ | - |
+| offsetTop | 吸顶时与顶部的距离，单位`px` | _number_ | `0` |
+| scrollTop | 当前滚动区域的滚动位置，非 `null` 时会禁用页面滚动事件的监听 | _number_ | - |
+| zIndex | 吸顶时的 z-index | _number_ | `99` |
+
+### Events
+
+| 事件名      | 说明       | 回调参数                                       |
+| ----------- | ---------- | ---------------------------------------------- |
+| onScroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |

package/lib/swipe-cell/README.md

@@ -0,0 +1,217 @@
+---
+category: 反馈
+---
+
+# SwipeCell 滑动单元格
+
+### 介绍
+
+可以左右滑动来展示操作按钮的单元格组件。
+
+### 引入
+
+```jsx
+import { SwipeCell } from '@ray-js/smart-ui';
+```
+
+## 代码演示
+
+### 基础用法
+`onTabClose` `v2.7.0` 属性是侧边栏关闭时触发的回调事件
+
+
+```jsx
+import React, { useCallback } from 'react';
+import { SwipeCell, CellGroup, Cell, SmartEventHandler, SmartSwipeCellPosition } from '@ray-js/smart-ui';
+import { View } from '@ray-js/ray';
+
+const style = {
+  display: 'flex',
+  width: '65px',
+  height: '100%',
+  fontSize: '15px',
+  color: '#fff',
+  backgroundColor: '#ee0a24',
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
+export default function Demo() {
+
+  const onHandleTabClose: SmartEventHandler<SmartSwipeCellPosition> = event => {
+    console.log(event.detail, '--position');
+  };
+  return ( 
+    <SwipeCell
+      rightWidth={65}
+      leftWidth={65}
+      slot={{
+        left: <View style={style}>选择</View>,
+        right: <View style={style}>删除</View>,
+      }}
+      onTabClose={onHandleTabClose}
+    >
+      <CellGroup>
+        <Cell title="单元格" value="内容" />
+      </CellGroup>
+    </SwipeCell>
+  );
+}
+```
+
+### 异步关闭
+
+当开启`async-close`时， 通过绑定`close`事件，可以自定义两侧滑动内容点击时的关闭行为。
+
+```jsx
+import React, { useCallback } from 'react';
+import { SwipeCell, CellGroup, Cell, Dialog, DialogInstance } from '@ray-js/smart-ui';
+import { View } from '@ray-js/ray';
+
+const style = {
+  display: 'flex',
+  width: '65px',
+  height: '100%',
+  fontSize: '15px',
+  color: '#fff',
+  backgroundColor: '#ee0a24',
+  justifyContent: 'center',
+  alignItems: 'center',
+} as React.CSSProperties
+
+export default function Demo() {
+  const handleClose = useCallback(event => {
+    const { position, instance } = event.detail;
+    switch (position) {
+      case 'left':
+      case 'cell':
+        instance.close();
+        break;
+      case 'right':
+        DialogInstance.confirm({
+          context: this,
+          message: '确定删除吗？',
+        }).then(() => {
+          instance.close();
+        });
+        break;
+      default:
+    }
+  }, []);
+  return (
+    <>
+      <SwipeCell
+        rightWidth={65}
+        leftWidth={65}
+        slot={{
+          left: <View style={style}>选择</View>,
+          right: <View style={style}>删除</View>,
+        }}
+        asyncClose
+        onClose={handleClose}
+      >
+        <CellGroup>
+          <Cell title="单元格" value="内容" />
+        </CellGroup>
+      </SwipeCell>
+      <Dialog id="smart-dialog" />
+    </>
+  );
+}
+```
+
+### 提示被打开
+
+```jsx
+import React, { useCallback } from 'react';
+import { SwipeCell, CellGroup, Cell, Notify, NotifyInstance } from '@ray-js/smart-ui';
+import { View } from '@ray-js/ray';
+
+export default function Demo() {
+  const handleOpen = useCallback(event => {
+    const { position, name } = event.detail;
+    switch (position) {
+      case 'left':
+        NotifyInstance({
+          context: this,
+          type: 'primary',
+          message: `${name}${position}部分展示open事件被触发`,
+        });
+        break;
+      case 'right':
+        NotifyInstance({
+          context: this,
+          type: 'primary',
+          message: `${name}${position}部分展示open事件被触发`,
+        });
+        break;
+      default:
+    }
+  }, []);
+  return (
+    <>
+      <SwipeCell
+        id="swipe-cell"
+        rightWidth={65}
+        leftWidth={65}
+        slot={{
+          left: <View className={styles.left}>选择</View>,
+          right: <View className={styles.right}>删除</View>,
+        }}
+        onOpen={handleOpen}
+      >
+        <CellGroup>
+          <Cell title="单元格" value="内容" />
+        </CellGroup>
+      </SwipeCell>
+      <Notify id="smart-notify" />
+    </>
+  );
+}
+```
+
+## API
+
+### Props
+
+| 参数        | 说明                                    | 类型               | 默认值  |
+| ----------- | --------------------------------------- | ------------------ | ------- |
+| asyncClose | 是否异步关闭 | _boolean_ | `false` |
+| disabled | 是否禁用滑动 | _boolean_ | `false` |
+| leftWidth | 左侧滑动区域宽度 | _number_ | `0` |
+| name | 标识符，可以在 close 事件的参数中获取到 | _string \| number_ | - |
+| rightWidth | 右侧滑动区域宽度 | _number_ | `0` |
+
+### Slot
+
+| 名称  | 说明           |
+| ----- | -------------- |
+| -     | 自定义显示内容 |
+| left | 左侧滑动内容 |
+| right | 右侧滑动内容 |
+
+### Events
+
+| 事件名     | 说明       | 参数                                                      |
+| ---------- | ---------- | --------------------------------------------------------- |
+| onClick | 点击时触发 | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
+| onTabClose `v2.7.0` | 关闭时触发 | 关闭的位置 (`left` `right`) |
+| onClose | 点击异步关闭时触发 | { position: 'left' \| 'right' , instance , name: string } |
+| onOpen | 打开时触发 | { position: 'left' \| 'right' , name: string } |
+
+### close 参数
+
+| 参数     | 类型     | 说明                                               |
+| -------- | -------- | -------------------------------------------------- |
+| instance | _object_ | SwipeCell 实例 |
+| name | 标识符 | _string_ |
+| position | _string_ | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
+
+### 方法
+
+通过 [selectComponent](/material/smartui?comId=faq) 可以获取到 SwipeCell 实例并调用实例方法
+
+| 方法名 | 参数                      | 返回值 | 介绍             |
+| ------ | ------------------------- | ------ | ---------------- |
+| close | - | - | 收起单元格侧边栏 |
+| open | position: `left \| right` | - | 打开单元格侧边栏 |

package/lib/switch/README.md

@@ -0,0 +1,316 @@
+---
+category: 反馈
+---
+
+# Switch 开关
+
+### 介绍
+
+简单易用的开关组件
+
+### 引入
+
+```jsx
+import { Switch } from '@ray-js/smart-ui';
+```
+
+## 代码演示
+
+### 基础用法
+
+```jsx
+import { Switch } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, onChange] = React.useState(true);
+
+  return (
+    <>
+      <Switch
+        checked={value}
+        onChange={event => {
+          onChange(event.detail);
+        }}
+      />
+      <Switch
+        checked={!value}
+        onChange={event => {
+          onChange(event.detail);
+        }}
+      />
+    </>
+  );
+}
+```
+
+### 开关文案 `v2.7.0`
+
+```jsx
+import { Switch } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, onChange] = React.useState(true);
+
+  return (
+    <>
+      <Switch
+        checked={value}
+        activeText="开"
+        inactiveText="关"
+        onChange={event => {
+          onChange(event.detail);
+        }}
+      />
+      <ConfigProvider
+        themeVars={{
+          switchLabelFontSize: '10px',
+        }}
+      >
+        <Switch
+          checked={value}
+          activeText="展示"
+          inactiveText="隐藏"
+          onChange={event => {
+            onChange(event.detail);
+          }}
+        />
+      </ConfigProvider>
+    </>
+  );
+}
+```
+
+
+### 禁用
+
+```jsx
+import { Switch } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, onChange] = React.useState(true);
+
+  return (
+    <Switch
+      checked={value}
+      disabled
+    />
+  );
+}
+```
+
+### 加载
+
+```jsx
+import { Switch } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, onChange] = React.useState(true);
+
+  return (
+    <Switch
+      checked={value}
+      loading
+    />
+  );
+}
+```
+
+### 自定义大小
+
+`size` 属性可以设置组件的大小。
+
+```jsx
+import { Switch } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, onChange] = React.useState(true);
+
+  return (
+    <Switch
+      checked={value}
+      size="24px"
+    />
+  );
+}
+```
+
+### 自定义颜色
+
+设置 `activeColor` 可以设置选择后的颜色，`inactiveColor` 可以设置非选择后的颜色
+
+```jsx
+import { Switch } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, onChange] = React.useState(true);
+
+  return (
+    <Switch
+      checked={value}
+      activeColor="#07c160"
+      inactiveColor="#ee0a24"
+    />
+  );
+}
+```
+
+### 渐变色 `v2.5.0`
+
+所有 CSS background 可以实现的属性， `activeColor` 和 `inactiveColor` 都可以实现
+
+```jsx
+import { Switch } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, onChange] = React.useState(true);
+
+  return (
+    <Switch
+      checked={value}
+      activeColor="linear-gradient(to right, #ff7e5f, #987AFF)"
+      inactiveColor="linear-gradient(to right, #407e5f, #841AFF)"
+    />
+  );
+}
+```
+
+### 异步控制
+
+```jsx
+import { Switch, DialogInstance, Dialog } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, setValue] = React.useState(true);
+
+  const onChange = ({ detail }) => {
+    DialogInstance.confirm({
+      context: this,
+      title: '提示',
+      message: '是否切换开关？',
+    }).then(() => {
+      setValue(detail);
+    });
+  };
+
+  return (
+    <>
+      <Switch
+        checked={value}
+        onChange={onChange}
+      />
+      <Dialog id="smart-dialog" />
+    </>
+  );
+}
+```
+
+### 阻止冒泡
+
+`stopClickPropagation` 属性可以阻止冒泡。
+
+```jsx
+import { Switch } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, onChange] = React.useState(true);
+
+  return (
+    <Switch
+      checked={value}
+      stopClickPropagation
+      onChange={event => {
+        onChange(event.detail);
+      }}
+    />
+  );
+}
+```
+
+### 列表用法
+
+```jsx
+import { Switch, Cell, CellGroup } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, onChange] = React.useState(true);
+
+  return (
+    <CellGroup>
+      <Cell title="标题">
+        <Switch
+          checked={value}
+          onChange={event => {
+            onChange(event.detail);
+          }}
+        />
+      </Cell>
+    </CellGroup>
+  );
+}
+```
+
+## API
+
+### Props
+
+| 参数                            | 说明                   | 类型      | 默认值    |
+| ------------------------------- | ---------------------- | --------- | --------- |
+| activeColor | 打开时的背景色 | _string_ | `#1989fa` |
+| activeValue | 打开时的值 | _any_ | `true` |
+| checked | 开关选中状态 | _any_ | `false` |
+| disabled | 是否为禁用状态 | _boolean_ | `false` |
+| inactiveColor | 关闭时的背景色 | _string_ | `#fff` |
+| inactiveValue | 关闭时的值 | _any_ | `false` |
+| loading | 是否为加载状态 | _boolean_ | `false` |
+| name | 在表单内提交时的标识符 | _string_ | - |
+| size | 开关尺寸 | _string_ | `30px` |
+| stopClickPropagation `v1.0.2` | 是否阻止冒泡 | _boolean_ | `false` |
+| activeText `v2.7.0` | 打开时的文案 | _string_ | - |
+| inactiveText `v2.7.0` | 关闭时的文案 | _string_ | - |
+
+### Events
+
+| 事件名      | 说明             | 参数                       |
+| ----------- | ---------------- | -------------------------- |
+| onChange | 开关状态切换回调 | event.detail: 是否选中开关 |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| customClass | 根节点样式类 |
+| nodeClass | 圆点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --switch-width | _1.5338em_ | 开关宽度 |
+| --switch-height | _0.867em_ | 开关高度 |
+| --switch-node-size | _0.867em_ | 开关节点大小 |
+| --switch-node-z-index | _1_ | 开关节点层级 |
+| --switch-node-background-color | _#fff_ | - |
+| --switch-node-box-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05),_ | 开关节点阴影 |
+| --switch-background-color | _var(--app-B4-N6, rgba(0, 0, 0, 0.2))_ | 开关背景颜色 |
+| --switch-on-background-color | _#1989fa_ | 开关开启时背景颜色 |
+| --switch-transition-duration | _0.3s_ | 开关过渡持续时间 |
+| --switch-disabled-opacity | _0.4_ | 开关禁用时不透明度 |
+| --switch-border `@deprecated v2.5.0` | _0.08em solid rgba(0, 0, 0, 0.1)_ | 开关边框 |
+| --switch-node-on-background-color `v2.4.0` | _var(--switch-node-background-color, #fff)_ | 开启时圆球的背景色 |
+| --switch-padding `v2.5.0` | _0.08em_ | 内部边距 |
+| --switch-label-width `v2.7.0` | _2em_ | 文本开关时的默认宽度 |
+| --switch-label-font-size `v2.7.0` | _12px_ | 文字大小 |
+| --switch-label-active-color `v2.7.0` | _var(--app-B3, #ffffff)_ `v2.7.0` _#FFFFFF_ `v2.8.0` | 开时文字颜色 |
+| --switch-label-inactive-color `v2.7.0` | _var(--app-B3, #ffffff)_ `v2.7.0` _#FFFFFF_ `v2.8.0` | 关时文字颜色 |