-
Notifications
You must be signed in to change notification settings - Fork 136
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
45 changed files
with
1,765 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
App({}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
page { | ||
background-color: #F5F5f5; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
{ | ||
"dependencies": { | ||
"@preact/signals-core": "^1.7.0", | ||
"@mini-types/alipay": "^3.0.5", | ||
"async-validator": "^4.0.7", | ||
"dayjs": "^1.11.10", | ||
"fast-deep-equal": "3.1.3", | ||
"lodash-es": "^4.17.21", | ||
"tslib": "2.5.0" | ||
}, | ||
"repository": "[email protected]:ant-design/ant-design-mini.git" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
--- | ||
nav: | ||
path: /components | ||
group: | ||
title: Feedback | ||
order: 12 | ||
toc: 'content' | ||
--- | ||
|
||
# PopoverList | ||
|
||
<!-- <code src="../../docs/components/compatibility.tsx" inline="true"></code> --> | ||
|
||
Click on the element to pop up the bubble menu | ||
|
||
## When to use | ||
|
||
The bubble menu for navigation functions is evoked, usually used to accommodate functions used at low frequencies. This function can only be activated via the icon on the navigation bar. | ||
|
||
## Code Sample | ||
|
||
### Basic use | ||
|
||
<!-- <code src='pages/Popover/index' noChangeButton></code> --> | ||
|
||
### Use with List component | ||
|
||
<!-- <code src='pages/PopoverList/index' noChangeButton></code> --> | ||
|
||
## API | ||
|
||
| Property | Description | Type | Default Value | | ||
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------ | | ||
| autoAdjustOverflow | Automatically adjust the position when the bubble is blocked | boolean | true | | ||
| className | Class Name | string | - | | ||
| color | Background Color | string | - | | ||
| contentClassName | content Class Name | string | - | | ||
| contentStyle | content Style | string | - | | ||
| content | Content | string \| slot | - | | ||
| defaultVisible | Display by default | boolean | false | | ||
| destroyOnClose | Whether to unload content when invisible | boolean | false | | ||
| maskClassName | Class name of the layer | string | - | | ||
| maskStyle | The style of the layer | string | - | | ||
| placement | Bubble box position, optional `top`、`top-right`、`top-left`、`bottom`、`bottom-left`、`bottom-right`、`left`、`left-top`、`left-bottom`、`right`、`right-top` or `right-bottom` | string | top | | ||
| showMask | Whether to show the layer, if true, click the blank to close the Popover. | boolean | true | | ||
| style | Style | string | - | | ||
| visible | Display | boolean | - | | ||
| onVisibleChange | Callback at the time of visible change | (visible: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | ||
|
||
### Theme customization | ||
|
||
#### Style Variables | ||
|
||
Component provides the following CSS variables, which can be used to customize styles. For details, see ConfigProvider Components. | ||
|
||
| Variable name | Default Value | Remarks | | ||
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------ | | ||
| --popover-list-content-bg | <div style="width: 150px; height: 30px; background-color: rgba(0, 0, 0, 0.93); color: #ffffff;">rgba(0, 0, 0, 0.93)</div> | Popover List Content Background Color | | ||
| --popover-list-content-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | Popover List Content Color | | ||
| --popover-list-badge-color | <div style="width: 150px; height: 30px; background-color: #ff411c; color: #ffffff;">#ff411c</div> | Popover List Badge Color | | ||
| --popover-list-content-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">#333333</div> | Popover List Content Text Color | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,128 @@ | ||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
}; | ||
var __generator = (this && this.__generator) || function (thisArg, body) { | ||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; | ||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; | ||
function verb(n) { return function (v) { return step([n, v]); }; } | ||
function step(op) { | ||
if (f) throw new TypeError("Generator is already executing."); | ||
while (g && (g = 0, op[0] && (_ = 0)), _) try { | ||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
if (y = 0, t) op = [op[0] & 2, t.value]; | ||
switch (op[0]) { | ||
case 0: case 1: t = op; break; | ||
case 4: _.label++; return { value: op[1], done: false }; | ||
case 5: _.label++; y = op[1]; op = [0]; continue; | ||
case 7: op = _.ops.pop(); _.trys.pop(); continue; | ||
default: | ||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } | ||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } | ||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } | ||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } | ||
if (t[2]) _.ops.pop(); | ||
_.trys.pop(); continue; | ||
} | ||
op = body.call(thisArg, _); | ||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } | ||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; | ||
} | ||
}; | ||
import mixinValue from '../mixins/value'; | ||
import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect'; | ||
import { getSystemInfo } from '../_util/jsapi/get-system-info'; | ||
import { Component, getValueFromProps, triggerEvent } from '../_util/simply'; | ||
import { PopoverDefaultProps } from './props'; | ||
import { getPopoverStyle } from './utils'; | ||
Component(PopoverDefaultProps, { | ||
getInstance: function () { | ||
if (this.$id) { | ||
return my; | ||
} | ||
return this; | ||
}, | ||
onTapItem: function (e) { | ||
var item = e.currentTarget.dataset.item; | ||
triggerEvent(this, 'tapItem', item, e); | ||
}, | ||
updatePopover: function () { | ||
return __awaiter(this, void 0, void 0, function () { | ||
var _a, placement, autoAdjustOverflow, _b, containerRect, childrenRect, contentRect, systemInfo, _c, popoverContentStyle, adjustedPlacement; | ||
return __generator(this, function (_d) { | ||
switch (_d.label) { | ||
case 0: | ||
_a = getValueFromProps(this, [ | ||
'placement', | ||
'autoAdjustOverflow', | ||
]), placement = _a[0], autoAdjustOverflow = _a[1]; | ||
return [4 /*yield*/, Promise.all([ | ||
getInstanceBoundingClientRect(this.getInstance(), "#ant-popover-list-children".concat(this.$id ? "-".concat(this.$id) : '')), | ||
getInstanceBoundingClientRect(this.getInstance(), this.$id | ||
? "#ant-popover-list-children-".concat(this.$id, " > *") | ||
: "#ant-popover-list-children-container"), | ||
getInstanceBoundingClientRect(this.getInstance(), this.$id | ||
? "#ant-popover-list-content-".concat(this.$id) | ||
: '#ant-popover-list-content'), | ||
getSystemInfo(), | ||
])]; | ||
case 1: | ||
_b = _d.sent(), containerRect = _b[0], childrenRect = _b[1], contentRect = _b[2], systemInfo = _b[3]; | ||
_c = getPopoverStyle(placement, autoAdjustOverflow, { | ||
containerRect: containerRect, | ||
childrenRect: childrenRect, | ||
contentRect: contentRect, | ||
systemInfo: systemInfo, | ||
}), popoverContentStyle = _c.popoverContentStyle, adjustedPlacement = _c.adjustedPlacement; | ||
this.setData({ | ||
popoverContentStyle: popoverContentStyle, | ||
adjustedPlacement: adjustedPlacement, | ||
}); | ||
return [2 /*return*/]; | ||
} | ||
}); | ||
}); | ||
}, | ||
onVisibleChange: function (e) { | ||
var value = !this.getValue(); | ||
if (!this.isControlled()) { | ||
this.update(value); | ||
} | ||
triggerEvent(this, 'visibleChange', value, e); | ||
}, | ||
}, { | ||
adjustedPlacement: '', | ||
popoverContentStyle: '', | ||
}, [ | ||
mixinValue({ | ||
valueKey: 'visible', | ||
defaultValueKey: 'defaultVisible', | ||
transformValue: function (value) { | ||
if (value) { | ||
this.updatePopover(); | ||
} | ||
else { | ||
this.setData({ | ||
adjustedPlacement: '', | ||
}); | ||
} | ||
return { | ||
needUpdate: true, | ||
value: value, | ||
}; | ||
}, | ||
}), | ||
], { | ||
observers: { | ||
'placement, autoAdjustOverflow, mixin': function () { | ||
if (this.getValue()) { | ||
this.updatePopover(); | ||
} | ||
}, | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"component": true, | ||
"usingComponents": { | ||
"ant-icon": "../Icon/index", | ||
"mask": "../Mask/index" | ||
} | ||
} |
Oops, something went wrong.