huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use passive instead of clickable for Switch label (#332)

Browse Source
This commit is contained in:
Robin Malfait
2021-04-13 18:45:51 +02:00
committed by GitHub
parent 0a39cf6b22
commit 11a5942142
6 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/@headlessui-react/src/components/label/label.tsx
+3 -3
View File
@@ -82,10 +82,10 @@ type LabelPropsWeControl = 'id'
export function Label<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl> & {
clickable?: boolean
passive?: boolean
}
) {
let { clickable = false, ...passThroughProps } = props
let { passive = false, ...passThroughProps } = props
let context = useLabelContext()
let id = `headlessui-label-${useId()}`
@@ -96,7 +96,7 @@ export function Label<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
let allProps = { ...passThroughProps, ...propsWeControl }
// @ts-expect-error props are dynamic via context, some components will
// provide an onClick then we can delete it.
if (!clickable) delete allProps['onClick']
if (passive) delete allProps['onClick']
return render({
props: allProps,
packages/@headlessui-react/src/components/switch/README.md
+4 -4
View File
@@ -121,10 +121,10 @@ function NotificationsToggle() {
##### Props
| Prop | Type | Default | Description |
| :---------- | :------------------ | :------ | :---------------------------------------------------------------- |
| `as` | String \| Component | `label` | The element or component the `Switch.Label` should render as. |
| `clickable` | Boolean | `false` | Wether or not to toggle the `Switch` when you click on the label. |
| Prop | Type | Default | Description |
| :-------- | :------------------ | :------ | :----------------------------------------------------------------------------------- |
| `as` | String \| Component | `label` | The element or component the `Switch.Label` should render as. |
| `passive` | Boolean | `false` | When `passive` is `false`, clicking the `Switch.Label` will not toggle the `Switch`. |
#### Switch.Description
packages/@headlessui-react/src/components/switch/switch.test.tsx
+4 -4
View File
@@ -263,7 +263,7 @@ describe('Mouse interactions', () => {
assertSwitch({ state: SwitchState.Off })
})
it('should be possible to toggle the Switch with a click on the Label (clickable passed)', async () => {
it('should be possible to toggle the Switch with a click on the Label', async () => {
let handleChange = jest.fn()
function Example() {
let [state, setState] = useState(false)
@@ -276,7 +276,7 @@ describe('Mouse interactions', () => {
handleChange(value)
}}
/>
<Switch.Label clickable>The label</Switch.Label>
<Switch.Label>The label</Switch.Label>
</Switch.Group>
)
}
@@ -305,7 +305,7 @@ describe('Mouse interactions', () => {
assertSwitch({ state: SwitchState.Off })
})
it('should not be possible to toggle the Switch with a click on the Label', async () => {
it('should not be possible to toggle the Switch with a click on the Label (passive)', async () => {
let handleChange = jest.fn()
function Example() {
let [state, setState] = useState(false)
@@ -318,7 +318,7 @@ describe('Mouse interactions', () => {
handleChange(value)
}}
/>
<Switch.Label>The label</Switch.Label>
<Switch.Label passive>The label</Switch.Label>
</Switch.Group>
)
}
packages/@headlessui-vue/src/components/label/label.ts
+3 -3
View File
@@ -67,11 +67,11 @@ export let Label = defineComponent({
name: 'Label',
props: {
as: { type: [Object, String], default: 'label' },
clickable: { type: [Boolean], default: false },
passive: { type: [Boolean], default: false },
},
render() {
let { name = 'Label', slot = {}, props = {} } = this.context
let { clickable, ...passThroughProps } = this.$props
let { passive, ...passThroughProps } = this.$props
let propsWeControl = {
...Object.entries(props).reduce(
(acc, [key, value]) => Object.assign(acc, { [key]: unref(value) }),
@@ -83,7 +83,7 @@ export let Label = defineComponent({
// @ts-expect-error props are dynamic via context, some components will
// provide an onClick then we can delete it.
if (!clickable) delete allProps['onClick']
if (passive) delete allProps['onClick']
return render({
props: allProps,
packages/@headlessui-vue/src/components/switch/README.md
+4 -4
View File
@@ -147,10 +147,10 @@ export default {
##### Props
| Prop | Type | Default | Description |
| :---------- | :------------------ | :------ | :---------------------------------------------------------------- |
| `as` | String \| Component | `label` | The element or component the `SwitchLabel` should render as. |
| `clickable` | Boolean | `false` | Wether or not to toggle the `Switch` when you click on the label. |
| Prop | Type | Default | Description |
| :-------- | :------------------ | :------ | :---------------------------------------------------------------------------------- |
| `as` | String \| Component | `label` | The element or component the `SwitchLabel` should render as. |
| `passive` | Boolean | `false` | When `passive` is `false`, clicking the `SwitchLabel` will not toggle the `Switch`. |
#### SwitchDescription
packages/@headlessui-vue/src/components/switch/switch.test.tsx
+4 -4
View File
@@ -399,13 +399,13 @@ describe('Mouse interactions', () => {
assertSwitch({ state: SwitchState.Off })
})
it('should be possible to toggle the Switch with a click on the Label (clickable passed)', async () => {
it('should be possible to toggle the Switch with a click on the Label', async () => {
let handleChange = jest.fn()
renderTemplate({
template: html`
<SwitchGroup>
<Switch v-model="checked" />
<SwitchLabel clickable>The label</SwitchLabel>
<SwitchLabel>The label</SwitchLabel>
</SwitchGroup>
`,
setup() {
@@ -437,13 +437,13 @@ describe('Mouse interactions', () => {
assertSwitch({ state: SwitchState.Off })
})
it('should not be possible to toggle the Switch with a click on the Label', async () => {
it('should not be possible to toggle the Switch with a click on the Label (passive)', async () => {
let handleChange = jest.fn()
renderTemplate({
template: html`
<SwitchGroup>
<Switch v-model="checked" />
<SwitchLabel>The label</SwitchLabel>
<SwitchLabel passive>The label</SwitchLabel>
</SwitchGroup>
`,
setup() {