| 135 | } |
| 136 | |
| 137 | function getStateAttributes<TState extends RenderState>( |
| 138 | state: TState, |
| 139 | mapping?: StateAttributesMapping<TState> |
| 140 | ) { |
| 141 | const props: Record<string, unknown> = {} |
| 142 | |
| 143 | for (const key of Object.keys(state) as Array<keyof TState>) { |
| 144 | const value = state[key] |
| 145 | const attributes = mapping?.[key]?.(value) |
| 146 | |
| 147 | if (attributes) { |
| 148 | Object.assign(props, attributes) |
| 149 | continue |
| 150 | } |
| 151 | |
| 152 | if (key === "slot") { |
| 153 | props["data-slot"] = value |
| 154 | continue |
| 155 | } |
| 156 | |
| 157 | const attribute = `data-${String(key).replace( |
| 158 | /[A-Z]/g, |
| 159 | (letter) => `-${letter.toLowerCase()}` |
| 160 | )}` |
| 161 | |
| 162 | if (typeof value === "boolean") { |
| 163 | props[attribute] = value ? "" : undefined |
| 164 | } else if (value !== null && value !== undefined) { |
| 165 | props[attribute] = String(value) |
| 166 | } |
| 167 | } |
| 168 | |
| 169 | return props |
| 170 | } |
| 171 | |
| 172 | type EventHandler = (event: React.SyntheticEvent) => void |
| 173 | |